﻿<div class="demo-description">
    <h2>
        <DemoNavLink Link="TreeView#HierarchicalDataBinding" />Bind to Hierarchical Data
    </h2>
    <p>The DevExpress <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxTreeView#bind-to-data">TreeView</a> supports binding to hierarchical data structures. A bound TreeView creates a node for each data item.</p>
    <p>The following properties should be specified to bind TreeView to a hierarchical data structure:</p>
    <ul>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxTreeView.Data">Data</a> - A TreeView data source object.</li>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxTreeView.ChildrenExpression">ChildrenExpression</a> - A lambda expression that returns the data item’s children.</li>
    </ul>
    <p>The following properties specify expressions that return node information (text, name, and etc.):</p>
    <ul>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxTreeView.TextExpression">TextExpression</a> - A lambda expression that returns the node’s text.</li>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxTreeView.NameExpression">NameExpression</a> - A lambda expression that returns the node’s unique identifier (name).</li>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxTreeView.IconCssClassExpression">IconCssClassExpression</a> - A lambda expression that returns the name of a CSS class applied to the node’s icon.</li>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxTreeView.NavigateUrlExpression">NavigateUrlExpression</a> - A lambda expression that returns the node’s target URL.</li>
    </ul>
</div>
<div class="card demo-card demo-card-shadow">
    <div class="card-body">
        <h5 class="card-title">Chemical elements</h5>
        <DxTreeView CssClass="mw-480" Data="@ChemicalElements.Groups"
            TextExpression="@(dataItem => ((ChemicalElementGroup)dataItem).Name)"
            ChildrenExpression="@(dataItem => ((ChemicalElementGroup)dataItem).Groups)">
        </DxTreeView>
    </div>
</div>
<CodeSnippet_TreeView_HierarchicalDataBinding></CodeSnippet_TreeView_HierarchicalDataBinding>
